<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <div class="left-nav">
            <img src="../assets/images/home_active.png" alt="" />
            Luckin Coffee
          </div>
        </template>
        <template #right>
          <div class="right-nav" @click="stroll">先逛一逛</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <h3>找回密码!</h3>
      <p>Find password</p>
    </div>
    <div>
      <van-form>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          autocomplete="off"
        />
        <van-field
          v-model="password"
          :right-icon="flag == false ? 'closed-eye' : 'eye-o'"
          :type="flag == false ? 'password' : 'text'"
          @click-right-icon="toggle()"
          name="password"
          label="密码"
          placeholder="密码"
          autocomplete="off"
        />
        <div class="forgot" @click="login">已有账号，快去登录</div>
        <div class="allbutton">
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
            @click="loginNew"
              >登录</van-button>
              <div class="quit">
            <van-button  round block type="info" native-type="info" 
            @click="quit"
              >返回</van-button>
              </div>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindPwdNext",
  data() {
    return {
      phone: "",
      password: "",
      flag: false,
    };
  },
  methods: {
    // 返回上一级
    quit() {
      this.$router.go(-1)
    },
    // 跳转登录
    login(){
        this.$router.push({ name: "Login" });
    },
    // 先逛一逛
    stroll() {
      this.$router.push({ name: "Home" });
    },
    // 图标
    toggle() {
      this.flag = !this.flag;
    },
    // 登录
    loginNew(){
      let phoneCheck = /^1[3-9]\d{9}$/;
      if (!phoneCheck.test(this.phone)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      let psdCheck = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (!psdCheck.test(this.password)) {
        this.$toast("请输入正确的密码");
        return;
      }
      this.axios({
        method: "POST",
        url: "/retrievePassword",
        data: {
            phone:this.phone,
            password:this.password
        },
      })
        .then((res) => {
            this.$toast(res.data.msg);
            if(res.data.code === "L001"){
                setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
            }
        })
        .catch((err) => {
          
        });
    }
  },
};
</script>

<style lang="less" scoped>
.left-nav {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: rgb(12, 52, 186);
  img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    vertical-align: middle;
  }
}
.banner {
  padding: 40px 25px;
  h3 {
    font-size: 22px;
    color: gray;
  }
  p {
    font-size: 16px;
    color: gray;
  }
}
.forgot {
  padding: 25px 15px 15px 250px;
}
.allbutton {
  .van-button {
    margin: 20px 0;
    background-color: rgb(12, 52, 186);
    border: 1px solid rgb(12, 52, 186);
  }
}
.quit {
  /deep/ .van-button {
    // margin: 20px 0;
    background-color: white;
    border: 1px solid rgb(12, 52, 186);
    color: rgb(12, 52, 186);
  }
}

.zhuce-btn {
  border: 1px solid rgb(12, 52, 186);
  width: 345px;
  margin: 20px 15px;
  background-color: white;
  color: rgb(12, 52, 186);
}
.zhuce {
  padding-top: 45px;
  .van-button {
    background-color: rgb(12, 52, 186);
    border: none;
  }
}
</style>